<!DOCTYPE html>
<html>
<head>
	<title>开发者列表</title>
	<!--#include("../common/common-link.html"){}-->
	<style type="text/css">
		.layui-form-switch{margin-top: 0;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">开发者列表</h4>
				<div class="btns-group">
					<input type="button" class="btn button addBtn" @click="add" value="添加开发者"/>
				</div>
			</div>
			<div class="content">
				<table class="table-content">
					<tr>
						<th width="3%">序号</th>
						<th width="30%">绑定公司</th>
						<th width="24%">token</th>
						<th width="15%">secret</th>
						<th width="8%">状态</th>
						<th width="20%">创建时间</th>
					</tr>
					<template v-if="list&&list.length>0">
					<tr v-for="(developer,index) in list">
						<td>{{index+1}}</td>
						<td>{{developer.companyName}}</td>
						<td>{{developer.token}}</td>
						<td>{{developer.secret}}</td>
						<td>
							<div class="layui-form" v-if="developer.status">
							  	<div :id="'switch'+index" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch" :data-index="index"><em>活动</em><i></i></div>
							</div>
							<div class="layui-form" v-else>
							  	<div :id="'switch'+index" class="layui-unselect layui-form-switch" lay-skin="_switch" :data-index="index"><em>冻结</em><i></i></div>
							</div>
							</td>
						<td>{{developer.createTime}}</td>
					</tr>
					</template>
					<template v-else>
					<tr>
						<td colspan="6">暂无开发者</td>
					</tr>
					</template>
				</table>
			</div>
		</div>
		<div id="page"></div>
	</div>
</body>
<script type="text/javascript">
	var pageData = {};
	var form={};
	function initVue() {
		form.pageSize=10;
		form.currentPageIndex=1;
		pageData.form=form;
		pageData.list=[];
		new Vue({
			el:"#container-wrap",
			data:pageData
		});
		request();
		Vue.nextTick(function() {
			$("#container-wrap").show();
		});
	};
	function request(){
		var load_id = util.load();
		util.syncPost({
			url:"/developer/list",
			data:form,
			success : function(result) {
				$.extend(pageData, result);
				Vue.nextTick(function() {
					bindSwitch();
					page();
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function page() {
		util.laypage({
			elem : 'page',
			count : pageData.totalRecord,
			limit : form.pageSize,
			curr : form.currentPageIndex,
			jump : function(obj, first) {
				form.currentPageIndex = obj.curr;
				if (!first) {
					form.pageSize=obj.limit;
					request();
				}
			}
		});
	};
	function bindSwitch(){
		var developers=pageData.list;
		for(var i in developers){
			var developer=developers[i];
			$("#switch"+i).click(processSwitch);
		}
	};
	function processSwitch(event){
		var target=event.currentTarget;
		var $target=$(target);
		var dataset=target.dataset;
    	var index=dataset.index;
    	var developer=pageData.list[index];
    	var id=developer.id;
    	var state=developer.status;
    	if(!state){
    		developer.status=1;
    		util.confirm("确认修改为活动状态？",function(){
    			modify(index,id,1);
    		},function(){
    			developer.status=0;
    		});
    	}else{
    		developer.status=0;
    		util.confirm("确认冻结该开发者？",function(){
    			modify(index,id,0);
    		},function(){
    			developer.status=1;
    		});
    	}
	};
	function add(){
		window.location.href="add";
	};
	function modify(index, id, status) {
		var _form = {};
		_form.id = id;
		_form.status = status;
		var load_id = util.load();
		util.post({
			url : "/developer/modify",
			data : _form,
			success : function(result) {
				layer.close(load_id);
				var developer = pageData.list[index];
				developer.status = status;
				layer.msg('操作成功', {icon:1,time:1000});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function initialize(){
		layui.use(['laypage'], function(){
			laypage = layui.laypage;
			initVue();
		});
	};
</script>
</html>